<template>
	<view class="map-wrap">
		<view class="mask">
			
		</view>
		<map class="map" :markers="markers" :include-points="includePoints" @tap="openMap"
			:longitude="longitude" :latitude="latitude" :polyline="polyline"></map>
	</view>
</template>

<script>
	var amapFile = require('@/common/amap-wx.130.js')
	import {
		aMapWXkey
	} from '@/config/index.js'
	export default {
		data() {
			return {
				includePoints: [],
				polyline: [],
				qdzd: [],
				longitude: '',
				latitude: '',
				markers: [{
					iconPath: '/static/icon_start.png',
					id: 1,
					latitude: '',
					longitude: '',
					width: 24,
					height: 24
				}, {
					iconPath: '/static/icon_end.png',
					id: 2,
					latitude: '',
					longitude: '',
					width: 24,
					height: 24
				}],
				mapHeight: '',
				myAmapFun: null,
				origin: '', // 起点
				destination: '', //终点
				waypoints: '', // 途经点 经纬度
				zoom:12
			};
		},
		props:['location_list'],
		mounted() {
			this.myAmapFun = new amapFile.AMapWX({
				key: aMapWXkey
			});
			let qdzd = this.location_list
			this.qdzd = qdzd
			let start = qdzd[0]
			let end = qdzd[qdzd.length - 1]
			this.origin = [start.longitude, start.latitude].toString()
			this.destination = [end.longitude, end.latitude].toString()
			this.longitude = start.longitude
			this.latitude = start.latitude

			// 设置起点终点
			this.markers[0].longitude = start.longitude
			this.markers[0].latitude = start.latitude
			this.markers[this.markers.length - 1].longitude = end.longitude
	
			this.markers[this.markers.length - 1].latitude = end.latitude
			// 设置途经点
			let waypoints = qdzd.slice(1, qdzd.length - 1)
			// console.log(waypoints)
			if (waypoints.length > 0) {
				waypoints.forEach((item, i) => {
					this.waypoints += `${item.longitude},${item.latitude};`
					this.markers[i + 1] = {
						iconPath: '/static/icon_loacation.png',
						id: this.markers.length,
						latitude: item.latitude,
						longitude: item.longitude,
						width: 24,
						height: 24
					}
				})
			}

			// console.log(this.origin)
			// console.log(this.destination)
			this.getLine()
			// this.location_list = uni.getStorageSync('location_list')
			this.getIncludePoints()
			// this.getMarkers()
		},

		methods: {
			openMap() {
				console.log('点击地图')
				uni.setStorageSync('location_list', this.location_list)
				uni.navigateTo({
					url: '/pages_release/map/map'
				})
			},
			getLine() {
				console.log('----------')
				this.myAmapFun.getDrivingRoute({
					origin: this.origin,
					destination: this.destination,
					waypoints: this.waypoints,
					success: (data) => {
						// console.log(data)
						// console.log(this.waypoints)
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].steps) {
							var steps = data.paths[0].steps;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						this.polyline = [{
							points: points,
							color: "#519D76",
							width: 3,
							arrowLine: true,
						}]
					},
					fail: function(info) {
						console.log(info)
					}
				})
			},
			// 添加途经点
			pickerAddress(e) {
				console.log(e)
				let latitude = e.detail.latitude
				let longitude = e.detail.longitude
				this.waypoints += `${longitude},${latitude};`
				this.markers.splice(this.markers.length - 1, 0, {
					iconPath: '/static/icon_loacation.png',
					id: this.markers.length + 1,
					latitude: latitude,
					longitude: longitude,
					width: 25,
					height: 25
				})
				// console.log(this.markers)
				this.myAmapFun.getRegeo({
					location:`${longitude},${latitude}`,
					success:(res)=>{
						// console.log('途经点',res)
						this.qdzd.splice(this.qdzd.length - 1, 0, {
							name: res[0].desc,
							latitude: latitude,
							longitude: longitude,
							images: [],
							content: '',
							video: ''
						})
					}
				})
				
				this.getLine()
			},
			getMarkers() {
				let markers = [{
						id: 1,
						latitude: this.location_list[0].latitude,
						longitude: this.location_list[0].longitude,
						iconPath: '/static/icon_start.png'
					},
					{
						id: 2,
						latitude: this.location_list[this.location_list.length - 1].latitude,
						longitude: this.location_list[this.location_list.length - 1].longitude,
						iconPath: '/static/icon_end.png'
					}
				]

				
				
				
				this.markers = markers
			},
			getIncludePoints() {
				let points = []
				this.location_list.forEach((item, i) => {
					points.push({
						latitude: item.latitude,
						longitude: item.longitude,
					})
				})
				this.includePoints = points
				console.log('this.includePoints',this.includePoints)
			}
		}
	}
</script>

<style>
	.map-wrap{
		position: relative;
	}
	/* #ifdef MP */
	.mask{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,0);
		width: 320upx;
		height: 400upx;
		z-index: 10000;
	}
	/* #endif */
	
	.map {
		width: 320upx;
		height: 400upx;
		border-radius: 16upx;
		overflow: hidden;
	}

	.header {
		padding: 30upx;
		border-bottom: 1upx solid #f5f5f5;
	}

	.cancel {
		font-size: 30upx;
		font-weight: 400;
		color: #333333;
	}

	.confirm {
		width: 120upx;
		line-height: 58upx;
		background: #519D76;
		border-radius: 8upx;
		text-align: center;
		font-size: 30upx;
		color: #FFFFFF;
	}

	.address {
		padding: 30upx;
	}

	.title {
		font-size: 26upx;
		color: #999;
	}

	.desc {
		font-size: 30upx;
		color: #333;
		font-weight: 500;
	}
</style>
